import React, { PureComponent } from 'react'

export class App extends PureComponent {
  constructor() {
    super()
    this.state = {
      username: 'coderwhy',
      password: 'abcd',
      isAgree: false,
      // checkbox多选默认是数组，并且数组中需要时对象类型
      hobbies: [
        { value: 'song', text: '唱', checked: false },
        { value: 'dance', text: '跳', checked: false },
        { value: 'rap', text: 'rap', checked: false },
      ],
      // fruit: 'orange'    // select单选
      fruit: ['orange'], // select多选
    }
  }

  handleSubmitClick(e) {
    console.log(this.state.username)
    console.log(
      '获取爱好：',
      this.state.hobbies
        .filter((item) => item.checked)
        .map((item) => item.value)
    )
    // 阻止默认行为
    e.preventDefault()
  }

  changeForm(e) {
    const value = e.target.type === 'checkbox' ? 'checked' : 'value'
    this.setState({
      [e.target.name]: e.target[value],
    })
  }

  handleHabbiesChange(e, index) {
    const hobbies = [...this.state.hobbies]
    hobbies[index].checked = e.target.checked

    this.setState({
      hobbies,
    })
  }

  handleSelectChange(e) {
    // select单选
    /* this.setState({
      [e.target.name]: e.target.value,
    }) */

    // select多选
    /* const options = Array.from(e.target.selectedOptions)
    const values = options.map((item) => item.value)
    this.setState({
      fruit: values,
    }) */

    const values = Array.from(e.target.selectedOptions, (item) => item.value)
    this.setState({
      fruit: values,
    })
  }

  render() {
    const { username, password, isAgree, hobbies, fruit } = this.state

    return (
      <div>
        <form onSubmit={(e) => this.handleSubmitClick(e)}>
          <label htmlFor="username">
            用户名：
            <input
              id="username"
              type="text"
              onChange={(e) => this.changeForm(e)}
              name="username"
              value={username}
            />
          </label>
          <br />

          <label htmlFor="password">
            密&nbsp;&nbsp;&nbsp;码：
            <input
              type="password"
              id="password"
              value={password}
              name="password"
              onChange={(e) => this.changeForm(e)}
            />
          </label>
          <br />

          {/* checkbox */}
          <label htmlFor="isAgree">
            <input
              type="checkbox"
              name="isAgree"
              id="isAgree"
              checked={isAgree}
              onChange={(e) => this.changeForm(e)}
            />
            用户协议
          </label>
          <br />

          {/* checkbox多选 */}
          <div>
            您的爱好：
            {hobbies.map((item, index) => (
              <label htmlFor={item.value} key={item.value}>
                <input
                  type="checkbox"
                  name={item.value}
                  id={item.value}
                  checked={item.checked}
                  onChange={(e) => this.handleHabbiesChange(e, index)}
                />
                {item.text}
              </label>
            ))}
          </div>

          {/* select */}
          <select
            name="fruit"
            value={fruit}
            onChange={(e) => this.handleSelectChange(e)}
            multiple
          >
            <option value="apple">苹果</option>
            <option value="banner">香蕉</option>
            <option value="orange">橘子</option>
          </select>
          <div>
            <button>提交</button>
          </div>
        </form>
        <h2>{username + '' + password}</h2>
      </div>
    )
  }

  inputChange(e) {
    // console.log(e, e.target.value)
    this.setState({ username: e.target.value }, () => {
      console.log(this.state.username)
    })
  }
}

export default App
